<template>
  <div class="fybgadd" v-loading="loading" element-loading-text="拼命加载中">
    <div class="fybgadd-model">
      <div class="fybgadd-model-title">基础信息</div>
      <div class="fybgadd-model-one" style="margin-top: 10px">
        <div>款号：{{ type_no }}</div>
        <div>品名：{{ type_name }}</div>
        <div>颜色：{{ colour_number }}({{ colour }})</div>
        <div class="star">
          供应商：<el-select
            v-model="supplier_id"
            placeholder="请选择供应商"
            size="mini"
            filterable
          >
            <el-option
              v-for="item in factoryList"
              :key="item.supplier_id"
              :label="item.factory_name"
              :value="item.supplier_id"
            ></el-option>
          </el-select>
        </div>
        <div class="star">
          理单员：<el-select
            v-model="order_processor"
            filterable
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in userlist"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div style="display: flex; align-items: center; margin-top: 10px">
        成衣图：
        <el-image
          v-for="(item, index) in wear_image"
          :key="index"
          :src="item"
          fit="contain"
          style="width: 80px; height: 80px; margin-right: 10px"
          :preview-src-list="wear_image"
        ></el-image>
      </div>
    </div>
    <div class="fybgadd-model" style="margin-top: 10px">
      <div class="fybgadd-model-title">
        部位信息 <span style="color: #2c70d6">(请勾选封样报告用到的部位)</span>
      </div>
      <div style="margin-top: 10px">
        <el-table
          size="mini"
          ref="multipleTable"
          :data="position_list"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="is_new" width="55" align="center">
            <template slot-scope="{ row }">
              <el-checkbox
                v-model="row.is_new"
                :true-label="1"
                :false-label="0"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="部位" align="center" prop="position_title">
          </el-table-column>
          <el-table-column
            prop="position_method"
            label="测量方法"
            align="center"
          >
          </el-table-column>
          <el-table-column label="工艺尺寸" align="center">
            <el-table-column prop="code_list" :label="size" align="center">
              <template slot-scope="{ row }">
                {{ row.code_list[size] }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="封样尺寸" align="center">
            <el-table-column prop="seal_code" :label="size" align="center">
              <template slot-scope="{ row, $index }">
                <el-input
                  @input="onInput($event, row, $index)"
                  v-model="row.seal_code"
                  placeholder="请输入"
                  type="number"
                ></el-input>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="tolerance" label="误差(cm)" align="center">
            <template slot-scope="{ row }">
              <div :style="{ color: row.tolerance > 0 ? 'red' : '#67C23A' }">
                {{ row.tolerance }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sample_code" label="版实长" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="fybgadd-model" style="margin-top: 10px">
      <div class="fybgadd-model-title">
        修改意见
        <i
          class="el-icon-circle-plus-outline pointer"
          style="color: #2c70d6; font-weight: 600; font-size: 16px"
          @click="onUpdate"
        ></i>
      </div>
      <div class="fybgadd-model-two" style="margin-top: 20px">
        <div
          style="display: flex; margin-top: 10px"
          v-for="(item, idx) in modification_comments"
          :key="idx"
        >
          <div
            class=""
            style="
              width: 80px;
              height: 28px;
              margin-right: 10px;
              display: flex;
              align-items: center;
            "
          >
            意见{{ idx + 1 }}
          </div>
          <div>
            <div>
              <el-input
                style="width: 1000px; margin-right: 10px"
                v-model="item.content"
                placeholder="请输入注意事项"
                size="mini"
                clearable
              ></el-input>
              <i
                class="el-icon-delete pointer"
                style="margin-left: 10px; color: red"
                @click="onDelete(idx)"
              ></i>
            </div>

            <div style="display: flex; margin-top: 10px">
              <el-upload
                class="avatar-uploader"
                action="https://ssy.13yu.com/index.php/Admin/Api/upload"
                :on-success="
                  (response) => {
                    return handleSuccess(response, index, idx);
                  }
                "
                :before-remove="
                  (response) => {
                    return handleRemoves(response, idx);
                  }
                "
                list-type="picture-card"
                :file-list="modification_comments[idx].images"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <div class="fileimg">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                    />
                  </div>

                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemoves(file, idx)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fybgadd-model" style="margin-top: 10px">
      <div class="fybgadd-model-title">其他事项</div>
      <div>
        <div style="display: flex; align-items: center; margin-top: 20px">
          <div style="width: 90px">说明：</div>
          <el-input
            style="width: 1000px"
            v-model="other_matters.explain"
            placeholder="请输入说明"
            size="mini"
            clearable
          ></el-input>
        </div>
        <div style="display: flex; align-items: center; margin-top: 20px">
          <div style="width: 90px">备注：</div>
          <el-input
            type="textarea"
            style="width: 1000px"
            v-model="other_matters.remark"
            placeholder="请输入备注"
            size="mini"
            clearable
          ></el-input>
        </div>
      </div>
    </div>

    <div style="margin-top: 10px">
      <el-button
        type="primary"
        size="mini"
        @click="onClickSubmit"
        :disabled="!supplier_id || !order_processor"
        >确 定</el-button
      >
    </div>
    <el-dialog :visible.sync="dialogVisibleImage">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminOperateLook_new_products_plank_house,
  postHomeCodeGetFactory,
  postAdminUserUserlist,
  postAdminOperateset_sealed_sample_report,
  postAdminOperateget_sealed_sample_report_detail,
} from "@/api";
import { floatSub } from "@/utils/algorithm.js";
export default {
  data() {
    return {
      loading: false,
      factoryList: [],
      userlist: [],
      dialogVisibleImage: false,
      dialogImageUrl: "",
      id: "",
      type_no: "",
      type_name: "",
      supplier_id: "",
      order_processor: "",
      wear_image: [],
      colour_number: "",
      colour: "",
      size: "",
      position_list: [],
      modification_comments: [{ content: "", images: [] }], //修改意见
      other_matters: {
        explain: "改正以上问题，可生产大货  封样报告一起送仓库",
        remark:
          "大货生产前工艺单、样衣、色卡，纸样互对，如有疑问需在开裁前及时与我公司技术部联系，未经我公司同意不得擅自更改。如有绣花、印花、压皱、打条、切割大货生产中请检查，如有问题及时联系，如果生产结束发现问题造成损失一切后果由工厂承担！！！",
      },
    };
  },
  async activated() {
    this.loading = true;
    await this.postHomeCodeGetFactory();
    await this.postAdminUserUserlist();
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      await this.postAdminOperateget_sealed_sample_report_detail(
        this.$route.query.id
      );
    } else {
      let color = JSON.parse(this.$route.query.color);
      this.colour_number = color.colour_number;
      this.colour = color.colour;
      this.type_no = this.$route.query.type_no;
      await this.postAdminOperateLook_new_products_plank_house(
        this.$route.query.type_no
      );
    }
    this.loading = false;
  },
  methods: {
    async postAdminOperateget_sealed_sample_report_detail(id) {
      let obj = {
        id,
      };
      try {
        let res = await postAdminOperateget_sealed_sample_report_detail(obj);
        let data = res.data;
        this.type_name = data.type_name;
        this.type_no = data.type_no;
        this.colour_number = data.colour_number;
        this.colour = data.colour;
        this.supplier_id = data.supplier_id;
        this.order_processor = data.order_processor;
        this.position_list = data.position_list;
        this.modification_comments = data.modification_comments;
        this.other_matters = data.other_matters;
        let keys = Object.keys(data.position_list[0].code_list);
        this.size = keys[0];
      } catch (error) {}
    },
    // 提交
    async onClickSubmit() {
      this.loading = true;
      let {
        type_no,
        colour_number,
        colour,
        supplier_id,
        order_processor,
        position_list,
        modification_comments,
        other_matters,
        id,
      } = this;
      let is = position_list.some((e) => {
        return e.is_new && !e.seal_code;
      });
      if (is) {
        this.$message.warning(
          "所勾选的部位未编辑封样尺寸，请填写后再进行保存！"
        );
        this.loading = false;
      } else {
        let obj = {
          type_no,
          colour_number,
          colour,
          supplier_id,
          order_processor,
          position_list,
          modification_comments,
          other_matters,
        };
        if (id) {
          obj.id = id;
        }
        try {
          this.$confirm(
            "保存前“请注意勾选封样报告用到的部位”，否则下载的封样报告会缺失此信息！",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(async () => {
              let res = await postAdminOperateset_sealed_sample_report(obj);
              this.$message.success("成功");
              this.loading = false;
              this.factoryList = [];
              this.userlist = [];
              this.dialogVisibleImage = false;
              this.dialogImageUrl = "";
              this.id = "";
              this.type_no = "";
              this.type_name = "";
              this.supplier_id = "";
              this.order_processor = "";
              this.wear_image = [];
              this.colour_number = "";
              this.colour = "";
              this.size = "";
              this.position_list = [];
              this.modification_comments = [{ content: "", images: [] }]; //修改意见
              this.other_matters = {
                explain: "改正以上问题，可生产大货  封样报告一起送仓库",
                remark:
                  "大货生产前工艺单、样衣、色卡，纸样互对，如有疑问需在开裁前及时与我公司技术部联系，未经我公司同意不得擅自更改。如有绣花、印花、压皱、打条、切割大货生产中请检查，如有问题及时联系，如果生产结束发现问题造成损失一切后果由工厂承担！！！",
              };
              this.$router.go(-1);
            })
            .catch(() => {
              this.loading = false;
            });
        } catch (error) {
          this.loading = false;
        }
      }
    },
    // 用户列表
    async postAdminUserUserlist() {
      let obj = {
        size: 100000,
        page: 1,
      };
      postAdminUserUserlist(obj).then((res) => {
        this.userlist = res.data;
      });
    },
    // 加工厂列表
    postHomeCodeGetFactory() {
      let obj = {
        page: 1,
        size: 1000,
      };
      postHomeCodeGetFactory(obj).then((res) => {
        this.factoryList = res.data;
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImage = true;
    },
    onDelete(index) {
      let { modification_comments } = this;
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        modification_comments.splice(index, 1);
        this.modification_comments = modification_comments;
      });
    },
    handleSuccess(response, index, idx) {
      let { modification_comments } = this;
      let obj = {
        name: "图片",
        url: response.img,
      };
      modification_comments[idx].images.push(obj);
      this.modification_comments = modification_comments;
    },
    handleRemoves(file, idx) {
      let { modification_comments } = this;
      let index = modification_comments[idx].images.findIndex(
        (e) => e.url == file.url
      );
      modification_comments[idx].images.splice(index, 1);
      this.modification_comments = modification_comments;
      return true;
    },
    onUpdate() {
      let { modification_comments } = this;
      let obj = {
        content: "",
        images: [],
      };
      modification_comments.push(obj);
      this.modification_comments = modification_comments;
    },
    async onInput(e, row, index) {
      e = e.replace(/[^0-9.]/g, "");
      let { position_list, size } = this;
      let tmpObj = position_list[index];
      tmpObj.tolerance = floatSub(e, tmpObj.code_list[size]);
      this.$set(this.position_list, index, tmpObj);
    },
    async postAdminOperateLook_new_products_plank_house(type_no) {
      let obj = {
        type_no,
      };
      let res = await postAdminOperateLook_new_products_plank_house(obj);
      let data = res.data;
      this.type_name = data.type_name;
      this.wear_image = data.wear_image;
      let code_list = data.plank_house_table_title.code_list;
      let size = "";
      for (let index = 0; index < code_list.length; index++) {
        if (code_list[index].is) {
          size = code_list[index].size_code.title;
        }
      }
      this.size = size;
      let position_list = data.plank_house_table_data;
      let tableData = [];
      for (let index = 0; index < position_list.length; index++) {
        let dataindex = position_list[index];
        let obj = {
          is_new: 0,
          position_title: dataindex.position_title,
          position_method: dataindex.position_method,
          code_list: {},
          sample_code: dataindex.sample_code,
          seal_code: "",
          tolerance: "",
        };
        obj.code_list[size] = dataindex.code_list[size];
        tableData.push(obj);
      }
      this.position_list = tableData;
    },
  },
};
</script>

<style lang="scss" scoped>
.fileimg {
  width: 80px;
  height: 80px;
  line-height: 84px;
}
.fybgadd {
  font-size: 14px;
  padding: 10px 20px;

  /deep/ .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 84px;
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;
    line-height: 84px;
  }
  .fybgadd-model {
    padding: 20px;
    background: #fff;
    .fybgadd-model-title {
      font-weight: 600;
    }
    .fybgadd-model-one {
      display: flex;
      align-items: center;
      > div {
        margin-right: 30px;
      }
    }
  }
}
</style>